<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>
        已知畜禽品种管理
    </title>
</head>
<body style="background-color: white">
<div id="app">
    <template v-loading="indexLoading">
        <div class="block">
            <span>动物种类</span>
            <el-cascader :options="culturedIds" :show-all-levels="false"
                         size="small"
                         v-model="searchChange.culturedId"></el-cascader>
            <span>品种类型</span>
            <el-cascader :options="varietyTypes" :show-all-levels="false"
                         size="small"
                         v-model="searchChange.varietyType"></el-cascader>
            <span>品种名</span>
            <el-input size="small" style="width: 199px" v-model="searchChange.varietyName" placeholder="请输入内容"></el-input>

            <el-button @click="handleSearch(1)" size="small" type="primary">筛选</el-button>
            <el-button @click="handleSearch(2)" size="small">重置</el-button>
        </div>
        <el-row style="background-color: #eaedf4;padding: 7px;margin: 7px 0">
            <el-button icon="el-icon-plus" onclick="window.location.href='/yxProExistVariety/addPage'" plain size="mini"
                       type="primary">添加
            </el-button>
            <el-button plain size="mini" type="info">
                <el-link href="/yxProExistVariety/excel/export" target="_blank">导出</el-link>
            </el-button>
        </el-row>
        <el-table :data="tableData" @select="handleSelect"
                  @select-all="handleSelect" fit size="small" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="详情" type="expand">
                <template slot-scope="props">
                    <el-form class="demo-table-expand" inline label-position="left">
                        <el-form-item label="动物描述">
                            <span>{{ props.row.varietyCon }}</span>
                        </el-form-item>
                        <el-form-item label="添加人">
                            <span>{{ props.row.addUser}}</span>
                        </el-form-item>
                        <el-form-item label="添加时间">
                            <span>{{ props.row.addTime }}</span>
                        </el-form-item>
                        <el-form-item label="更新人">
                            <span>{{ props.row.updateUser}}</span>
                        </el-form-item>
                        <el-form-item label="更新时间">
                            <span>{{ props.row.updateTime }}</span>
                        </el-form-item>
                        <el-form-item label="图片">
                            <el-link v-if="props.row.imgUrl !== null"  @click="viewImages(props.row.imgUrl)" type="primary">查看
                            </el-link>
                            <el-link v-else>没有了...</el-link>
                        </el-form-item>
                        <el-form-item label="备注">
                            <span>{{ props.row.remark }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="动物种类" prop="culturedId"></el-table-column>
            <el-table-column label="品种类型" prop="varietyType" ></el-table-column>
            <el-table-column label="品种名" prop="varietyName" ></el-table-column>
            <el-table-column label="品种来源" prop="varietyLy" ></el-table-column>
            <el-table-column label="操作" width="190">
                <template slot-scope="scope">
                    <el-button @click="handle(scope.$index, scope.row,1)" icon="el-icon-s-edit"
                               size="mini" type="primary">编辑
                    </el-button>
                    <el-popconfirm
                            confirm-button-text='好的' cancel-button-text='不用了'
                            icon="el-icon-info" icon-color="red" title="确定删除吗？"
                            @confirm="handle(scope.$index, scope.row,2)" >
                        <el-button slot="reference"  icon="el-icon-delete"
                                   size="mini" type="warning">删除
                        </el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
        <el-drawer
                :before-close="handleClose" :visible.sync="showDialog"
                direction="rtl" ref="drawer" size="50%" title="编辑">
            <div style="padding:50px">
                <el-form :model="form" label-position="top">
                    <el-form-item :label-width="formLabelWidth" label="动物种类" prop="culturedId">
                        <el-select placeholder="" v-model="form.culturedIdCode">
                            <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item of culturedIds"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="品种类型" prop="varietyType">
                        <el-select placeholder="" v-model="form.varietyType">
                            <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item of varietyTypes"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="品种名" prop="varietyName">
                        <el-input  placeholder="品种名" size="small"
                                  v-model="form.varietyName"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="品种来源" prop="varietyLy">
                        <el-select placeholder="" v-model="form.varietyLy">
                            <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item of varietyLy"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="动物描述" prop="varietyCon">
                        <el-input type="textarea" placeholder="动物描述" size="small" style="width: 320px"
                                  v-model="form.varietyCon"></el-input>
                    </el-form-item>

                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" placeholder="备注" size="small" style="width: 320px"
                                  v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="畜禽照片">
                        <el-divider content-position="left">已存在</el-divider>
                        <ul style="padding: 0">
                            <li v-for="(url,index) in urlList" :key="index" style="list-style: none;display: inline-block;margin-right:10px;position: relative">
                                <div @mouseover="isShowIcon = index" @mouseout="isShowIcon =-1">
                                    <el-image
                                            :preview-src-list="urlList"
                                            :src="url"
                                            style="width: 148px; height: 148px;border-radius: 5px">
                                    </el-image>
                                    <div @mouseover="isShowIcon = index" @mouseout="isShowIcon =-1" v-show="index===isShowIcon" class="deleteImage">
                                        <i class="el-icon-delete" @click="deleteImage(index)" style="cursor: pointer;font-size: 22px;margin-top: 65px"></i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <el-divider content-position="left">新添加</el-divider>
                        <el-upload ref="upload"
                                   action="/upload"
                                   :on-success="updateSuccess"
                                   list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <el-dialog :visible.sync="dialogVisible">
                    <img :src="dialogImageUrl" alt="" width="100%">
                </el-dialog>
                <div>
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button :loading="loading" @click="handleCommit" type="primary">
                        {{ loading ? '保存中 ...' : '保 存' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
        <el-dialog
                :visible.sync="centerDialogVisible"
                title="照片"
                width="50%">
            <ul>
                <li v-for="url in urlList" style="list-style: none;display: inline-block;margin: 0 10px">
                    <el-image
                            :preview-src-list="urlList"
                            :src="url"
                            style="width: 100px; height: 100px">
                    </el-image>
                </li>
            </ul>
            <span class="dialog-footer" slot="footer">
             <el-button @click="centerDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="/static/vendor/vue.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                indexLoading: true,
                tableListId: '',
                pageSize: 10,
                isShowIcon:-1,
                centerDialogVisible: false,
                urlList:[],
                addUrlList:[],
                total: 0,
                showDialog: false,
                currentPage: 1,
                searchChange: { culturedId: [], varietyType: [],varietyName:''},
                culturedIds: [],
                varietyTypes: [],
                varietyLy: [ { value: '1', label: '已有品种' }, {  value: '2', label: '审核确定新品种' } ],
                tableData: [],
                selectList: [],
                loading: false,
                form: {},
                formLabelWidth: '50px',
                dialogImageUrl: '',
                dialogVisible: false,
            }
        },
        methods: {
            /*初始化表格内容*/
            getTableData() {
                con_map = {
                    page_size: this.pageSize,
                    start_num: this.pageSize * (this.currentPage - 1)
                }
                let searchChange = this.searchChange;
                searchChange.page_size=this.pageSize
                searchChange.start_num=this.pageSize * (this.currentPage - 1)
                if ( searchChange.culturedId.length > 0 || searchChange.varietyType.length > 0||searchChange.varietyName !=='') {
                    let data = top.ajax.synclBody("/yxProExistVariety/getSearchList", searchChange);
                    this.tableData = data.items;
                    this.total = data.total;
                }else {
                    let res = top.ajax.synclBody("/yxProExistVariety/getList", con_map);
                    this.tableData = res.data.items;
                    this.total = res.data.total;
                }
            },
            /*筛选*/
            handleSearch(type) {
                let searchChange = this.searchChange;
                if (type === 2) {
                    searchChange.culturedId = [];
                    searchChange.varietyType = [];
                    searchChange.varietyName = '';
                    this.getTableData();

                } else {
                    if ( searchChange.varietyName !=='' || searchChange.culturedId.length > 0 || searchChange.varietyType.length > 0) {
                        searchChange.page_size=this.pageSize
                        searchChange.start_num=this.pageSize * (this.currentPage - 1)
                        let data = top.ajax.synclBody("/yxProExistVariety/getSearchList", searchChange);
                        this.tableData = data.items;
                        this.total = data.total;
                    }
                }
            },
            viewImages(imgUrl){
                if (imgUrl !== null){
                    this.urlList=imgUrl.split(",")
                    this.centerDialogVisible = true
                }
            },
            imageHover(index){
                this.isShowIcon = index
            },
            deleteImage(index){
                this.urlList.splice(index,1)
            },
            /*操作 按钮*/
            handle(index, row, type) {
                    switch (type) {
                        case 1: { //编辑
                            this.form = top.ajax.synclBody("/yxProExistVariety/selectOne/" + row.existVarietyId,).data
                            console.log(this.form)
                            if (this.form.imgUrl!=null){
                                this.urlList=this.form.imgUrl.split(",")
                            }
                            this.showDialog = true
                            break;
                        }
                        case 2: { //删除
                            top.ajax.synclBody("/yxProExistVariety/updateDelete/" + row.existVarietyId,);
                            break;
                        }
                    }
                    this.getTableData()
            },
            handleSelect(selectList, val) {
                this.selectList = selectList
            },
            bulkSubmit() {
                let list = this.selectList;
                if (list.length < 1) {
                    this.$notify.error({
                        title: '错误',
                        message: '至少选择一项'
                    });
                } else {
                    for (let el of list) {
                            this.handle(0, el,2)
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });

                    }
                }
            },

            handleSizeChange(val) {
                this.pageSize = val
                this.getTableData()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getTableData()
            },
            getCulturedIds() {
                let datas = top.ajax.syncl("/yxProCultured/queryAll", "");
                let culturedIds = [];
                for (let data of datas) {
                    let bean = {
                        value: data.culturedId,
                        label: data.culturedName
                    }
                    culturedIds.push(bean)
                }
                this.culturedIds = culturedIds;
            },
            getVarietyTypes() {
                let dicts = top.ajax.syncl("/dictCategory/getDictList/variety_type", "");
                let varietyTypes = [];
                for (let dict of dicts) {
                    let bean = {
                        value: dict.dict_code,
                        label: dict.dict_name
                    }
                    varietyTypes.push(bean)
                }
                this.varietyTypes = varietyTypes;
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要放弃修改表单吗？')
                    .then(_ => {
                        this.loading = false;
                        this.showDialog = false;
                    }).catch(_ => {
                });
            },
            updateSuccess(response, file, fileList){
                if (response.status ==="200"){
                    let url = response.data.url;
                    console.info(url)
                    this.addUrlList.push(url);
                    console.info(this.urlList)
                }
            },
            handleCommit() {
                let bean = {
                    existVarietyId: this.form.existVarietyId,
                    culturedId: this.form.culturedId,
                    varietyType: this.form.varietyType,
                    varietyName: this.form.varietyName,
                    varietyLy: this.form.varietyLy,
                    varietyCon: this.form.varietyCon,
                    remark: this.form.remark,
                    imgUrl:this.urlList.concat(this.addUrlList).join(","),
                }
                this.$confirm("确定修改？", '提示', {type: 'warning'})
                    .then(_ => {
                        this.loading = true;
                        top.ajax.synclBody("/yxProExistVariety/updateOneById", bean);
                        this.$refs.upload.clearFiles();
                        this.getTableData();
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.loading = false;
                        this.showDialog = false;
                    }).catch(_ => {
                });
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

        },
        mounted: function () {
            this.getTableData()
            this.getCulturedIds()
            this.getVarietyTypes()
        },
        created() {
            this.indexLoading = false
        }
    })
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .deleteImage{
        width: 148px;
        height: 148px;
        display: inline-block;
        text-align: center;
        align-items: center;
        border-right: 5px;
        position: absolute;
        background-color: rgba(222,222,222,.5);
        top: 0;left: 0;
    }
</style>
</html>
